<template>
  <div class="IntroContent">
    <van-divider :hairline="false">作者</van-divider>
    <!-- 作者区块 -->
    <!-- 这里请求到的数据有\n\r 
                pre-wrap 保留空白符序列，但是正常地进行换行。
         -->
    <div
      :style="{ whiteSpace: 'pre-wrap' }"
      v-for="item in ItemContent.authors"
      :key="item.author_id"
      class="authors-box"
    >
      <!-- 头像文字部分 -->
      <div class="authors-box-top" @click="GoAuthorPage(item.author_id)">
        <img :src="item.avatar" alt="" />
        <div>
          <h3>{{ item.name }}</h3>
          <p>{{ item.text_desc }}</p>
        </div>
      </div>
      <p>{{ item.introduction }}</p>
    </div>

    <!-- 作者end -->
    <!-- 判断本节目有没有视频 -->
    <div v-if="ItemContent.video">
      <video
        controls
        width="100%"
        height="200px"
        :src="ItemContent.video"
        :poster="ItemContent.video_img"
      ></video>
    </div>

    <!-- 节目介绍 -->
    <van-divider :hairline="false">节目介绍</van-divider>
    <!-- 循环内容 -->
    <div class="Program-box">
      <!-- 图片内容 -->
      <div v-html="ProgramHtml"></div>
      <div
        class="Program-box-list"
        v-for="item in ProgramOutline"
        :key="item.model_id"
      >
        <div class="Program-box-item">
          <img :src="item.title_url" alt="" />
          <p class="item-sub_title">{{ item.sub_title }}</p>

          <!-- 节目大纲 -->
          <div class="ProgramOutline-box" v-if="item.title == '节目大纲'">
            <div v-for="(i, index) in item.data" :key="i.title">
              <!-- 第一层循环的titile -->
              <div class="item-TitleText">
                <div>
                  <span>{{ "0" + (index + 1) }}</span>
                  <p>{{ i.title }}</p>
                </div>
                <!-- 小标题 -->
                <p>{{ i.sub_title }}</p>
              </div>
              <!-- 小列表 -->
              <ul>
                <li v-for="j in i.content" :key="j">
                  {{ j }}
                </li>
              </ul>
            </div>
          </div>

          <!-- 你将收获 -->
          <div v-if="item.title == '你将收获'">
            <div class="YouWillReap-box" v-for="i in item.data" :key="i.id">
              <!-- 左边和右边 -->
              <div class="YouWillReap-box-left">
                <p>{{ i.number }}</p>
                <span>{{ i.unit }}</span>
              </div>
              <div class="YouWillReap-box-right">
                {{ i.desc }}
              </div>
            </div>
          </div>

          <!-- 制作团队 -->
          <div v-if="item.title == '制作团队'">
            <img v-if="item.data.image" :src="item.data.image" alt="" />
            <div v-else>
              <!-- 没有图片的时候显示标题 -->
              <div class="ProductionTeam" v-for="i in item.data.desc" :key="i">
                <p>{{ i }}</p>
              </div>
            </div>
          </div>

          <!-- 订阅须知 -->
          <div v-if="item.title == '订阅须知'">
            <div class="Subscription-Instructions">
              <p v-for="i in item.data" :key="i">{{ i }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部随机推荐 -->
    <p class="PageSpeed-title">相关推荐</p>
    <div class="PageSpeed-box">
      <div
        @click="GetPageSpeedID(item.content_id)"
        v-for="item in relateContents"
        :key="item.content_id"
      >
        <img :src="item.background_img" alt="" />
        <div>
          <p class="van-multi-ellipsis--l2">{{ item.title }}</p>
          <p>{{ item.author }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { IntroContent } from "@/api/request";
export default {
  name: "IntroContent",
  props: ["ItemContent"],
  data() {
    return {
      // 内容列表
      ContentList: [],
      // 简介第一个html渲染
      ProgramHtml: "",
      // 循环图片意外的四个数组内容
      // 节目大纲以下
      ProgramOutline: [],
      // 底部相关推荐
      relateContents: [],
    };
  },

  activated() {
    // console.log("一进来 组件传来的id", this.ItemContent.content_id);
    setTimeout(() => {
      IntroContent({
        content_id: this.ItemContent.content_id,
      }).then(({ data }) => {
        // 提取相关推荐的内容
        this.relateContents = this.ItemContent.relate_contents;

        // 详情内容列表
        this.ContentList = data.data;
        // console.log("请求到简介啦", this.ContentList);
        // html渲染的数据
        this.ProgramHtml = this.ContentList[0].data;
        // console.log(this.ProgramHtml);

        // 删除数组第一个 节目大纲以下内容的数组
        this.ProgramOutline = this.ContentList.slice(1);
        // console.log(this.ProgramOutline, "节目大纲以下内容数组");
      });
    }, 1000);
  },
  methods: {
    GetPageSpeedID(id) {
      this.$router.replace({
        path: "/BookDetails",
        query: {
          id,
        },
      });
    },
    GoAuthorPage(authorId) {
      console.log(authorId);
      this.$router.replace({
        path: "/AuthorPageView",
        query: {
          authorId,
        },
      });
    },
  },
};
</script>

<style lang="scss">
.IntroContent {
  .van-divider {
    color: black;
  }
  // 作者块
  .authors-box {
    font-size: 0.8125rem;
    margin-bottom: 1.25rem;
    .authors-box-top {
      display: flex;
      align-items: center;
      // justify-content: center;
      margin-left: 3.125rem;
      img {
        width: 6.25rem;
        border-radius: 50%;
      }
      div {
        margin-left: 1.25rem;
        h3 {
          font-size: 0.875rem;
          color: #cbb885;
        }
        p {
          color: black;
          line-height: 1rem;
        }
      }
    }
    p {
      font-size: 0.75rem;
      color: var(--fontcolor);
      margin-top: 1.125rem;
    }
  }
  //作者结束
  // 节目介绍开始
  .Program-box {
    > div {
      .upload {
        width: 93vw !important;
        height: 100% !important;
      }
    }
    // 节目大纲内容
    .Program-box-list {
      .Program-box-item {
        img {
          width: 100%;
        }
        .item-sub_title {
          text-align: center;
          font-size: 0.75rem;
          color: var(--fontcolor);
          margin: 1.25rem 0;
        }
        // 节目大纲
        .ProgramOutline-box {
          font-size: 0.8125rem;
          color: #7b8185;
          .item-TitleText {
            margin: 0.625rem 0 0.625rem 1.25rem;
            > div {
              display: flex;
              align-items: center;

              span {
                color: #c8b279;
                font-size: 1.625rem;
              }
              p {
                color: #333333;
                font-size: 1rem;
                padding-left: 0.625rem;
              }
            }
            p {
              font-size: 0.875rem;
              color: #333333;
              margin: 0.5rem 0;
            }
          }
          ul {
            // text-align: center;
            list-style: disc;
            margin-left: 2.5rem;

            li {
              line-height: 1.5rem;
              &::marker {
                color: #e8e1d4;
              }
            }
          }
        }
        // 你将收获
        .YouWillReap-box {
          color: #c6b178;
          border: 2px solid #c6b178;
          margin: 1.25rem 0;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .YouWillReap-box-left {
            width: 40%;
            padding: 0.875rem;
            box-sizing: border-box;
            display: flex;
            align-items: flex-end;
            border-right: 1px solid #c6b178;
            font-size: 2.125rem;
            justify-content: center;
            span {
              font-size: 0.875rem;
            }
          }
          .YouWillReap-box-right {
            width: 60%;
            padding: 0.875rem;
            box-sizing: border-box;
            font-size: 0.8125rem;
          }
        }
        // 制作团队
        .ProductionTeam {
          margin-bottom: 1.25rem;
          p {
            margin: 0.375rem;
            text-align: center;
            color: #7b8185;
          }
        }
        // 订阅须知
        .Subscription-Instructions {
          background-color: #ededed;
          padding: 1.125rem;
          font-size: 0.8125rem;
          margin-bottom: 3.75rem;
          p {
            color: #808689;
            padding: 0.5rem;
          }
        }
      }
    }
  }
  .PageSpeed-title {
    margin: 1.25rem 0 0.625rem 0;
  }
  // 相关推荐
  .PageSpeed-box {
    height: 10rem;
    margin-bottom: 3.75rem;
    padding: 0.625rem 0;
    display: flex;
    justify-content: space-between;
    width: 100%;
    overflow: auto;
    > div {
      margin-right: 0.875rem;
      box-shadow: var(--boxsizi);
      position: relative;
      box-sizing: border-box;
      img {
        width: 6.25rem;
        height: 6.25rem;
      }
      div {
        padding: 0.375rem;
        margin-bottom: 0.5rem;

        p {
          font-size: 0.8125rem;
        }
        p:nth-child(2) {
          position: absolute;
          bottom: 0.375rem;
        }
      }
    }
  }
  ::-webkit-scrollbar {
    display: none;
    /* Chrome Safari */
  }
}
</style>